import React from 'react';

class TextInfo extends React.Component {

  componentDidMount() {
    this.props.toTop && this.node.scrollIntoView();
  }

  render() {
    let {info, sub, styles, subStyles} = this.props;

    styles = {
      textAlign: 'center',
      margin: '.8em',
      padding: '.2em',
      textShadow: '0 0.2em 0.5em #e4f7e0',
      ...styles,
    };

    subStyles = {
      display: 'block',
      fontSize: '.6em',
      fontStyle: 'italic',
      padding: '.2em',
      textAlign: 'right',
      color: 'gray',
      textShadow: '0 2px 6px white',
      ...subStyles
    };

    return (
      <div style={styles} ref={node => this.node = node}>
        {info}
        {sub && <sub style={subStyles}> {sub}</sub>}
      </div>
    )
  }
}

export default TextInfo;
